<template>
  <!-- 一个.vue文件就是一个组件, 一个项目中只有一个根组件 App.vue -->
  <!-- 一个.vue文件内部一般是由三部分组成: template , script , style -->
  <!-- template 内部写标签 , 只能有一个根元素 -->
  <!-- script 内部写js逻辑 , 内部需要 export default {}, 所有的js代码都需要写在这里 -->
  <!-- style 内部写css样式 , 可以通过lang='xx'指定style内部的css语法 , 可以通过设置 scoped 属性 让多个.vue文件之间的样式互不影响 -->
  <div id="app">
      <List :list="list" :currentIndex="currentIndex" @deliverIndex="changelist"></List>
  </div>
</template>

<script>
import List from "./components/list.vue";
import pic1 from "./assets/01.png";
import pic2 from "./assets/02.png";
import pic3 from "./assets/03.png";
export default {
  data(){
    return{
      currentIndex:0,
      list:[
        {//一个对象是一个分类
        listName:"三文鱼",
        list:[
          { pic:pic1,name:"挪威三文鱼",wen:"取余三文鱼中段，口感鲜嫩",price:"45" },
          { pic:pic1,name:"挪威纯鲜三文鱼",wen:"百分百当天空运直达",price:"54" },
          { pic:pic1,name:"瑞典三文鱼",wen:"取三文鱼前端段，口感鲜嫩",price:"41" },
          { pic:pic1,name:"瑞典三文鱼",wen:"取三文鱼前端段，口感鲜嫩",price:"41" }
        ]

        },
        {
          listName:"刺身",
          list:[
            {pic:pic2,name:"生蚝刺身",wen:"每份一只广东生蚝",price:"8"},
            { pic:pic2,name:"生蚝刺身",wen:"每份一只广东生蚝",price:"4" },
            {pic:pic2,name:"生蚝刺身",wen:"每份一只广东生蚝",price:"8"},
            {pic:pic2,name:"生蚝刺身",wen:"每份一只广东生蚝",price:"10"}
          ]
        },
        {
          listName:"野生大对虾",
          list:[
            {pic:pic3,name:"北极甜虾",wen:"每份30只",price:"22.4"},
            {pic:pic3,name:"北极甜虾",wen:"每份30只",price:"22.4"},
            {pic:pic3,name:"北极甜虾",wen:"每份30只",price:"22.4"},
            {pic:pic3,name:"北极甜虾",wen:"每份30只",price:"22.4"}
          ]
        }
      ]
    }
  },
  components:{
    List,
  },
  methods:{
     changelist(index){
      this.currentIndex = index;
    }
  }
}
</script>

<style lang="scss">
  *{
    margin: 0;
    padding: 0;
  }
  ul{
    list-style: none;
  }
</style>
